<template>
  <div class="detailInfo">
    <div class="score">
      <div class="titles">
        可用积分
      </div>
      <div class="nums">
        {{ info.iPoints }}
      </div>
      <div>
        <button
          class="dl"
          @click="GoToIntegral"
        >
          积分明细
        </button>
        <button class="rl">
          积分规则
        </button>
      </div>
    </div>
    <div class="tables">
      <div>
        <div
          v-if="info.iTotalPoints"
          class="values"
        >
          {{ info.iTotalPoints.toFixed(2) }}
        </div>
        <div class="tips">
          余额
        </div>
      </div>
      <div @click="tocollect">
        <div
          v-if="collect.pager"
          class="values"
        >
          {{ collect.pager.totalCount }}
        </div>
        <div class="tips">
          收藏
        </div>
      </div>
      <div @click="tohistory">
        <div
          v-if="his.pager"
          class="values"
        >
          {{ his.pager.totalCount }}
        </div>
        <div class="tips">
          足迹
        </div>
      </div>
      <div @click="toaddress">
        <img
          src="../../assets/img/person1.png"
          alt=""
        >
        <div class="tips">
          地址管理
        </div>
      </div>
      <div>
        <img
          src="../../assets/img/person2.png"
          alt=""
        >
        <div class="tips">
          实体卡
        </div>
      </div>
      <div>
        <img
          src="../../assets/img/person3.png"
          alt=""
        >
        <div class="tips">
          会员专属
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Person",
  components: {},
  data() {
    return {
      info: {},
      his: {
        pager: {
          totalCount: 0,
        },
      },
      collect: {
        pager: {
          totalCount: 0,
        },
      },
    };
  },
  mounted() {
    this.getUserInfo();
    this.getHistories();
    this.getProductFavoritesData();
  },
  methods: {
    //获取个人中心
    getUserInfo() {
      let par = {
        token: localStorage.getItem("token"),
        data: {},
      };
      this.$api.person.userInfo(par).then((res) => {
        if (res.code == 200) {
          this.info = res.data;
        }
      });
    },
    //获取足迹
    getHistories() {
      let par = {
        token: localStorage.getItem("token"),
        data: {},
      };
      this.$api.person.getHistories(par).then((res) => {
        if (res.code == 200) {
          this.his = res.data;
        }
      });
    },
    //获取收藏
    getProductFavoritesData() {
      let par = {
        token: localStorage.getItem("token"),
        data: {
          currentPage: 1,
          pagesize: 1000000,
          classId: "",
          productName: "",
          tagId: ""
         }
      };
      this.$api.person.getProductFavorites(par).then((res) => {
        if (res.code == 200) {
          this.collect = res.data;
        }
      });
    },
    tocollect() {
      this.$router.push({
        path: "/person/collect",
        query: {},
      });
    },
    tohistory() {
      this.$router.push({
        path: "/person/track",
        query: {},
      });
    },
    toaddress() {
      this.$router.push({
        path: "/person/address",
        query: {},
      });
    },
    // 积分明细
    GoToIntegral() {
      console.log('积分明细')
      this.$router.push({
        path: "/integral",
        query: {},
      });
    }
  },
};
</script>

<style lang="scss">
// .cate-item {
// 	&:nth-child(4n) {
// 		margin-right: 1.59rem !important;
// 	}
// 	&:nth-child(3n) {
// 		margin-right: 0 !important;
// 	}
// }

.detailInfo {
  height: 20.81rem;
  background: #fff;
  display: flex;
  flex-direction: row;
  margin-bottom: 1.44rem;

  .score {
    background: url(../../assets/img/personbg2.png) no-repeat left top;
    background-size: 100% 100%;
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
    align-items: center;
    justify-content: center;

    > .titles {
      font-size: 1.25rem;
    }

    > .nums {
      font-size: 2.63rem;
      padding-top: 2.44rem;
      padding-bottom: 2.75rem;
    }

    button {
      color: #fff;
      font-size: 1rem;
      padding: 0.88rem 2.19rem;
      outline: none;
      border: none;
      margin: 0 0.605rem;
      cursor: pointer;
      opacity: 0.85;

      &.dl {
        background: #d0a351;
      }

      &.rl {
        background: #000;
      }

      &:hover {
        opacity: 1;
      }
    }
  }

  .tables {
    width: 51%;
    height: 100%;
    display: flex;
    flex-direction: row;
    color: #565656;

    flex-wrap: wrap;

    > div {
      width: 33%;
      height: 10.405rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: 0.06rem solid #eaeaea;
      border-bottom: 0.06rem solid #eaeaea;
      cursor: pointer;
      > div {
        img {
          object-fit: contain;
        }

        &.tips {
          font-size: 0.88rem;
          padding-top: 1.2rem;
        }

        &.values {
          font-size: 1.75rem;
        }
      }
    }
  }
}
</style>
